<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精灵图鉴</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <style>
        .spirits-header {
            background: linear-gradient(135deg, #4CAF50, #2E7D32);
            padding: 20px 16px;
            color: white;
            border-radius: 0 0 16px 16px;
        }
        .spirits-search {
            margin-top: 16px;
            position: relative;
        }
        .spirits-search input {
            width: 100%;
            padding: 12px 42px;
            border-radius: 24px;
            border: none;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            font-size: 14px;
        }
        .spirits-search-icon {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
        }
        .category-tabs {
            display: flex;
            overflow-x: auto;
            padding: 4px 0;
            margin: 16px 0;
            -webkit-overflow-scrolling: touch;
        }
        .category-tab {
            padding: 8px 16px;
            border-radius: 16px;
            background-color: #f1f1f1;
            margin-right: 8px;
            white-space: nowrap;
            font-size: 14px;
        }
        .category-tab.active {
            background-color: var(--primary-color);
            color: white;
        }
        .spirits-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
            padding-bottom: 80px;
        }
        .spirit-grid-item {
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            position: relative;
        }
        .spirit-grid-image {
            height: 140px;
            overflow: hidden;
            position: relative;
        }
        .spirit-grid-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .spirit-grid-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.6), transparent 60%);
        }
        .spirit-grid-type {
            position: absolute;
            top: 8px;
            right: 8px;
            background-color: rgba(255,255,255,0.8);
            color: var(--primary-color);
            padding: 4px 8px;
            border-radius: 10px;
            font-size: 12px;
        }
        .spirit-grid-info {
            padding: 12px;
        }
        .spirit-grid-name {
            font-weight: bold;
            margin-bottom: 4px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .spirit-grid-desc {
            font-size: 12px;
            color: #666;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .spirit-grid-badges {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            margin-top: 8px;
        }
        .spirit-badge {
            font-size: 11px;
            padding: 2px 6px;
            border-radius: 10px;
            background-color: #e0f2f1;
            color: var(--primary-color);
        }
        .spirit-likes {
            font-size: 12px;
            color: #F44336;
            display: flex;
            align-items: center;
        }
        .spirit-likes i {
            margin-right: 4px;
        }
        .trending-spirits {
            margin-bottom: 24px;
        }
        .trending-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        .trending-more {
            color: var(--primary-color);
            font-size: 14px;
        }
        .trending-scroll {
            display: flex;
            overflow-x: auto;
            gap: 12px;
            -webkit-overflow-scrolling: touch;
        }
        .trending-item {
            min-width: 140px;
            width: 140px;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            background-color: white;
        }
        .trending-image {
            height: 140px;
            overflow: hidden;
        }
        .trending-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .trending-info {
            padding: 8px;
        }
        .trending-name {
            font-weight: bold;
            font-size: 14px;
            margin-bottom: 4px;
        }
        .trending-type {
            font-size: 12px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="app-header">
        <div class="header-title">精灵图鉴</div>
        <div class="header-actions">
            <i class="fas fa-filter"></i>
        </div>
    </div>

    <div class="spirits-header">
        <h1>精灵图鉴</h1>
        <p class="text-sm opacity-80">发现张家界的神奇精灵</p>
        
        <div class="spirits-search">
            <div class="spirits-search-icon">
                <i class="fas fa-search"></i>
            </div>
            <input type="text" placeholder="搜索精灵名称或类型...">
        </div>
    </div>

    <div class="app-content">
        <!-- 热门精灵 -->
        <div class="trending-spirits">
            <div class="trending-title">
                <h2>热门精灵</h2>
                <div class="trending-more">更多 <i class="fas fa-chevron-right"></i></div>
            </div>
            <div class="trending-scroll">
                <div class="trending-item">
                    <div class="trending-image">
                        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%234CAF50'/%3E%3Ccircle cx='100' cy='100' r='50' fill='white' fill-opacity='0.5'/%3E%3C/svg%3E" alt="云灵">
                    </div>
                    <div class="trending-info">
                        <div class="trending-name">云灵</div>
                        <div class="trending-type">天门云使</div>
                    </div>
                </div>
                <div class="trending-item">
                    <div class="trending-image">
                        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%23FF9800'/%3E%3Cpath d='M50,150 L100,50 L150,150 Z' fill='white' fill-opacity='0.5'/%3E%3C/svg%3E" alt="张峰林">
                    </div>
                    <div class="trending-info">
                        <div class="trending-name">张峰林</div>
                        <div class="trending-type">峰林侠</div>
                    </div>
                </div>
                <div class="trending-item">
                    <div class="trending-image">
                        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%232196F3'/%3E%3Cpath d='M50,100 Q100,50 150,100 Q100,150 50,100' fill='white' fill-opacity='0.5'/%3E%3C/svg%3E" alt="溪儿">
                    </div>
                    <div class="trending-info">
                        <div class="trending-name">溪儿</div>
                        <div class="trending-type">金鞭溪灵</div>
                    </div>
                </div>
                <div class="trending-item">
                    <div class="trending-image">
                        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%23F44336'/%3E%3Cpath d='M100,50 L100,150 M50,100 L150,100' stroke='white' stroke-width='10' stroke-opacity='0.5'/%3E%3C/svg%3E" alt="焰灵">
                    </div>
                    <div class="trending-info">
                        <div class="trending-name">焰灵</div>
                        <div class="trending-type">火把节使者</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 分类标签 -->
        <div class="category-tabs">
            <div class="category-tab active">全部</div>
            <div class="category-tab">自然景观</div>
            <div class="category-tab">民族文化</div>
            <div class="category-tab">珍稀动植物</div>
            <div class="category-tab">科技奇幻</div>
            <div class="category-tab">历史红色</div>
            <div class="category-tab">趣味互动</div>
        </div>
        
        <!-- 精灵网格列表 -->
        <div class="spirits-grid">
            <div class="spirit-grid-item">
                <div class="spirit-grid-image">
                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%234CAF50'/%3E%3Ccircle cx='100' cy='100' r='50' fill='white' fill-opacity='0.5'/%3E%3C/svg%3E" alt="云灵">
                    <div class="spirit-grid-overlay"></div>
                    <div class="spirit-grid-type">自然景观</div>
                </div>
                <div class="spirit-grid-info">
                    <div class="spirit-grid-name">
                        <span>云灵</span>
                        <div class="spirit-likes">
                            <i class="fas fa-heart"></i>
                            <span>1.2k</span>
                        </div>
                    </div>
                    <div class="spirit-grid-desc">
                        天门洞拟人化守护者，能召唤云海，是张家界最受欢迎的导游精灵。
                    </div>
                    <div class="spirit-grid-badges">
                        <div class="spirit-badge">引路使者</div>
                        <div class="spirit-badge">天门钥匙</div>
                    </div>
                </div>
            </div>
            
            <div class="spirit-grid-item">
                <div class="spirit-grid-image">
                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%232196F3'/%3E%3Cpath d='M50,100 Q100,50 150,100 Q100,150 50,100' fill='white' fill-opacity='0.5'/%3E%3C/svg%3E" alt="溪儿">
                    <div class="spirit-grid-overlay"></div>
                    <div class="spirit-grid-type">自然景观</div>
                </div>
                <div class="spirit-grid-info">
                    <div class="spirit-grid-name">
                        <span>溪儿</span>
                        <div class="spirit-likes">
                            <i class="fas fa-heart"></i>
                            <span>989</span>
                        </div>
                    </div>
                    <div class="spirit-grid-desc">
                        金鞭溪水精灵，通体透明蓝，持金鞭法杖，能召唤溪水特效。
                    </div>
                    <div class="spirit-grid-badges">
                        <div class="spirit-badge">净水使者</div>
                        <div class="spirit-badge">音乐天赋</div>
                    </div>
                </div>
            </div>
            
            <div class="spirit-grid-item">
                <div class="spirit-grid-image">
                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%23F44336'/%3E%3Cpath d='M100,50 L100,150 M50,100 L150,100' stroke='white' stroke-width='10' stroke-opacity='0.5'/%3E%3C/svg%3E" alt="焰灵">
                    <div class="spirit-grid-overlay"></div>
                    <div class="spirit-grid-type">民族文化</div>
                </div>
                <div class="spirit-grid-info">
                    <div class="spirit-grid-name">
                        <span>焰灵</span>
                        <div class="spirit-likes">
                            <i class="fas fa-heart"></i>
                            <span>876</span>
                        </div>
                    </div>
                    <div class="spirit-grid-desc">
                        白族火把节化身，持火把权杖，可以舞动洒落火星，带来好运。
                    </div>
                    <div class="spirit-grid-badges">
                        <div class="spirit-badge">舞蹈大师</div>
                        <div class="spirit-badge">驱邪纳福</div>
                    </div>
                </div>
            </div>
            
            <div class="spirit-grid-item">
                <div class="spirit-grid-image">
                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%239C27B0'/%3E%3Cpath d='M70,70 L130,130 M130,70 L70,130' stroke='white' stroke-width='10' stroke-opacity='0.5'/%3E%3C/svg%3E" alt="渊瞳">
                    <div class="spirit-grid-overlay"></div>
                    <div class="spirit-grid-type">自然景观</div>
                </div>
                <div class="spirit-grid-info">
                    <div class="spirit-grid-name">
                        <span>渊瞳</span>
                        <div class="spirit-likes">
                            <i class="fas fa-heart"></i>
                            <span>754</span>
                        </div>
                    </div>
                    <div class="spirit-grid-desc">
                        神堂湾深谷原型，操控雾气，根须与岩壁相连，神秘守护者。
                    </div>
                    <div class="spirit-grid-badges">
                        <div class="spirit-badge">迷踪大师</div>
                        <div class="spirit-badge">雾气掌控</div>
                    </div>
                </div>
            </div>
            
            <div class="spirit-grid-item">
                <div class="spirit-grid-image">
                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%23FF9800'/%3E%3Cpath d='M50,150 L100,50 L150,150 Z' fill='white' fill-opacity='0.5'/%3E%3C/svg%3E" alt="张峰林">
                    <div class="spirit-grid-overlay"></div>
                    <div class="spirit-grid-type">自然景观</div>
                </div>
                <div class="spirit-grid-info">
                    <div class="spirit-grid-name">
                        <span>张峰林</span>
                        <div class="spirit-likes">
                            <i class="fas fa-heart"></i>
                            <span>723</span>
                        </div>
                    </div>
                    <div class="spirit-grid-desc">
                        石英砂岩峰林原型，持峰林剑，环绕云雾特效，守护峰林生态。
                    </div>
                    <div class="spirit-grid-badges">
                        <div class="spirit-badge">剑术大师</div>
                        <div class="spirit-badge">峰林守护</div>
                    </div>
                </div>
            </div>
            
            <div class="spirit-grid-item">
                <div class="spirit-grid-image">
                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%23009688'/%3E%3Ccircle cx='100' cy='80' r='30' fill='white' fill-opacity='0.5'/%3E%3Cpath d='M60,130 L140,130 M70,150 L130,150' stroke='white' stroke-width='8' stroke-opacity='0.5'/%3E%3C/svg%3E" alt="定海">
                    <div class="spirit-grid-overlay"></div>
                    <div class="spirit-grid-type">自然景观</div>
                </div>
                <div class="spirit-grid-info">
                    <div class="spirit-grid-name">
                        <span>定海</span>
                        <div class="spirit-likes">
                            <i class="fas fa-heart"></i>
                            <span>654</span>
                        </div>
                    </div>
                    <div class="spirit-grid-desc">
                        黄龙洞守护者，持定海神针权杖，服饰有荧光矿物纹路。
                    </div>
                    <div class="spirit-grid-badges">
                        <div class="spirit-badge">洞窟向导</div>
                        <div class="spirit-badge">荧光探索</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="bottom-nav">
        <div class="nav-item">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </div>
        <div class="nav-item">
            <i class="fas fa-map-marked-alt"></i>
            <span>地图</span>
        </div>
        <div class="nav-item active">
            <i class="fas fa-dragon"></i>
            <span>精灵</span>
        </div>
        <div class="nav-item">
            <i class="fas fa-robot"></i>
            <span>导游</span>
        </div>
        <div class="nav-item">
            <i class="fas fa-user"></i>
            <span>我的</span>
        </div>
    </div>
</body>
</html> 